import React, { FC, HTMLAttributes } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import './index.less'

const PRE_CLS = 'stdTimelineItem'

export interface TimelineItemProps extends HTMLAttributes<HTMLElement> {
  date: string | Date;
  title: string;
  success?: boolean
}
const TimelineItem: FC<TimelineItemProps> = props => {
  const { className, date, title, success, ...restProps } = props
  const classes = classNames(PRE_CLS, className)

  return (
    <section className={classes} {...restProps}>
      <section className={`${PRE_CLS}Date`}>
        <section>{dayjs(date).format('MM-DD')}</section>
        <section>{dayjs(date).format('HH:mm')}</section>
      </section>
      <section className={`${PRE_CLS}Tag ${success ? 'success' : 'pending'}`}>
        <span />
      </section>
      <section className={`${PRE_CLS}Title`}>{title}</section>
    </section>
  )
}

export default TimelineItem
